<h1>Categories</h1>
<div class="left-box">

{literal}
<style type="text/css">

.categories_menu {
	list-style: none;
	width: 12em; /* set width of menu */
	background: #ffffff;
	padding: 0;
	margin:0;
	width:100%;
} 

.categories_menu ul {
	margin: 0 0 0 15px;
	padding:0;
}

.categories_menu ul li{ /* remove bullets and list indents */
	display:block;
	clear: both;
	list-style: none;
	margin: 0;
	padding: 0;
}

.categories_menu ul ul{ /* remove bullets and list indents */
	list-style: none;
	margin: 0 0 0 15px;
	padding: 0;
}


/* style, color and size links and headings to suit */
.categories_menu a, .categories_menu h2 {
	font: bold 11px/16px arial, helvetica, sans-serif;
	display: block;
	/*border-bottom: 1px solid silver;*/
	margin: 0;
	padding: 2px 3px;
}


.categories_menu ul li a{

	background: #ffffff;
	text-decoration: none;
}

.categories_menu a:hover {
	color: #ffffff;
	background: #cccccc;
}
</style>
{/literal}

<ul class='categories_menu'>
	{foreach from=$tree item=category name='cats' key=cid}
		{if !$smarty.foreach.cats.first}
			{assign var=previousKey value=$cid-1}
			{assign var=previousLevel value=$tree[$previousKey]->category_level}			
		{/if}
		
		
		{if $category->category_level>$previousLevel && $previousLevel}
			<ul><li>
		{elseif $category->category_level<$previousLevel  && $previousLevel}
			</li>
			{section name='closeUL' loop=$previousLevel-$category->category_level}</ul>{/section}			
			<li>
		{else}
			<li>	
		{/if}

		 <a  {if $current==$category->category_id}style='color: #ffffff;background: #cccccc;'{/if} href='/categories/{$category->category_name|inurl}-{$category->category_id}.html'>{$category->category_name}</a>
	{/foreach}
</ul>

</div>